<script setup>
import { ref,reactive } from "vue";
import { httpRequest } from "../../utils/http";
import { onLoad, onShow } from "@dcloudio/uni-app";

const textList = ref([])
const textarea = ref('')
const cancelIndex = ref(-1)
const lei = ref('')
onLoad((e)=>{
    if(e.lei){
      lei.value = e.lei
    }
    if(e.text){
        textList.value = e.text.split(/[，。！？、：；……]/)
        console.log(textList.value);
        textList.value = textList.value.filter(e=>e.length)
    }else{
        textList.value = uni.getStorageSync('textList')
    }
})

const num = ref('')
const typeUp = ref(0)
const originalList = ref([])
const videoArr = uni.getStorageSync('videoArr')
const up = async(e,i) => {
    // if(videoArr&&videoArr[i].length){
    //   console.log('删除');
    //     videoArr[i].forEach(e=>{
    //     httpRequest("/api/delVideosOne2", "POST", {
    //       videoPath: e,
    //     });
    // })
    // }
    // if(videoArr&&videoArr[i-1].length){
    //     console.log('删除'+ i-1);
    //     videoArr[i-1].forEach(e=>{
    //     httpRequest("/api/delVideosOne2", "POST", {
    //       videoPath: e,
    //     });
    // })
    // }
    const res = await httpRequest("/api/findTaskStart", "POST", {
            businessId: uni.getStorageSync("business").businessId,
          });
          if(res.data){
            uni.showModal({
              title: '提示',
              content: '当前操作会删除视频,是否继续？',
              success: async({ confirm, cancel }) => {
                if(confirm){
                    //删除临时文件
                  await httpRequest('/api/delStaging','POST',{
                     businessId: uni.getStorageSync("business").businessId,
                   })
                   await httpRequest('/api/delTask','POST',{
                      taskId:uni.getStorageSync('taskId')
                    })
                    uni.removeStorageSync('taskId')
                   originalList.value = textList.value.slice()
                    cancelIndex.value = i-1
                    textList.value[i-1] = textList.value[i-1] + ',' + e
                    textList.value.splice(i,1)  
                    let n = uni.getStorageSync('num')
                    num.value = uni.getStorageSync('num')
                    n.splice(i,1)
                    uni.setStorageSync('num',n)  
                    console.log(originalList.value);
                }
              }
            })
          }else{
              //删除临时文件
              await httpRequest('/api/delStaging','POST',{
                     businessId: uni.getStorageSync("business").businessId,
                   })
                   originalList.value = textList.value.slice()
                    cancelIndex.value = i-1
                    textList.value[i-1] = textList.value[i-1] + ',' + e
                    textList.value.splice(i,1)  
                    console.log(originalList.value);
          }
    
    
}
const down = async(e,i) => {
    // if(videoArr&&videoArr[i]){
    //   console.log('删除');
    //     videoArr[i].forEach(e=>{
    //     httpRequest("/api/delVideosOne2", "POST", {
    //       videoPath: e,
    //     });
    // })
    // }
    // if(videoArr&&videoArr[i+1]){
    //   console.log('删除'+ i+1);

    //     videoArr[i+1].forEach(e=>{
    //     httpRequest("/api/delVideosOne2", "POST", {
    //       videoPath: e,
    //     });
    // })
    // }
    const res = await httpRequest("/api/findTaskStart", "POST", {
            businessId: uni.getStorageSync("business").businessId,
          });
          if(res.data){
            uni.showModal({
              title: '提示',
              content: '当前操作会删除视频,是否继续？',
              success: async({ confirm, cancel }) => {
                if(confirm){
                    //删除临时文件
                  await httpRequest('/api/delStaging','POST',{
                     businessId: uni.getStorageSync("business").businessId,
                   })
                   await httpRequest('/api/delTask','POST',{
                      taskId:uni.getStorageSync('taskId')
                    })
                    uni.removeStorageSync('taskId')
                  originalList.value = textList.value.slice()
                  cancelIndex.value = i
                  textList.value[i+1] = e + ',' + textList.value[i+1]  
                  textList.value.splice(i,1)
                  let n = uni.getStorageSync('num')
                  num.value = uni.getStorageSync('num')
                  n.splice(i,1)
                  uni.setStorageSync('num',n)  
                  typeUp.value = 1
                }
              }
            })
          }else{
            await httpRequest('/api/delStaging','POST',{
                     businessId: uni.getStorageSync("business").businessId,
                   })
                  originalList.value = textList.value.slice()
                  cancelIndex.value = i
                  textList.value[i+1] = e + ',' + textList.value[i+1]  
                  textList.value.splice(i,1)
                  typeUp.value = 1
          }
    
}   

const cancel = () => {
    console.log(originalList.value);
    textList.value = originalList.value
    cancelIndex.value = -1
}

const lastPage = async() => {
  uni.showLoading({
        title: '请稍后'
    })
  const res = await httpRequest("/api/findTaskStart", "POST", {
            businessId: uni.getStorageSync("business").businessId,
          });
          uni.hideLoading()
          if(res.data){
            uni.showModal({
              title: '提示',
              content: '当前操作会删除视频,是否继续？',
              success: ({ confirm, cancel }) => {
                if(confirm){
                  httpRequest('/api/delStaging','POST',{
                     businessId: uni.getStorageSync("business").businessId,
                   })
                  httpRequest('/api/delTask','POST',{
                      taskId:uni.getStorageSync('taskId')
                    })
                    uni.removeStorageSync('taskId')
                 uni.redirectTo({ url: `/pageA/index/inputText?lei=${lei.value}` })
                }
              }
            })
          }else{
           uni.redirectTo({ url: `/pageA/index/inputText?lei=${lei.value}` })
          }
}

const nextPage = () => {
    uni.showLoading({
        title: '请稍后'
    })
    uni.setStorageSync('textList', textList.value)
    uni.redirectTo({ url: `/pageA/index/textVideo?type=${typeUp.value}&lei=${lei.value}` })
    uni.hideLoading()
}

const editIndex = ref('')
const add = ref()
const edit = (i) => {
    editIndex.value = i
    textarea.value = textList.value[i]
    console.log(textarea.value);
    add.value.open("bottom");
}

const close = () => {
    add.value.close()
}
const changeInput = (e) => {
  if(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu.test(textarea.value)) uni.showToast({title:'不可以输入特殊字符',icon:'none'})
    textarea.value = textarea.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5\s\p{P}]/gu, "")
    console.log(textarea.value);  
}

const addVoice = async() => {
    if(!textarea.value.trim())return uni.showToast({title:'请先输入内容',icon:'none'})
    if(!(/[\u4e00-\u9fa5a-zA-Z0-9]/.test(textarea.value)))return uni.showToast({title:'至少包含一个字',icon:'none'})
    const res = await httpRequest('/api/getVideosOne2','POST',{
      businessId: uni.getStorageSync("business").businessId,
  })
    console.log(res.data.filter(e=>e.index == editIndex.value+1));
    let list = res.data.filter(e=>e.index == editIndex.value+1)
    let time = 0
    if(list.length){
      list[0].lists.forEach(e=>{
        console.log(e.time);
        time = time + Number(e.time)
      })
    }
    if(time&&textarea.value.length>Math.floor(time*3))return uni.showToast({title:`最多输入${Math.floor(time*3)}个字来匹配视频`,icon:'none'})
    let arr = textList.value
    arr[editIndex.value] = textarea.value
    textList.value[editIndex.value] = textarea.value
    console.log(textList.value);
    add.value.close()
}
</script>

<template>
  <view class="page">
    <view class="box">
        <view v-for="item,index in textList" :key="index">
            <view class="item" v-if="item.length">
                <view class="item-top">
                <button class="up" v-if="cancelIndex==index" @click="cancel">撤销</button>
                <button class="up" v-if="index!=0" @click="up(item,index)">向上合并</button>
                <button class="up" v-if="index!=textList.length-1" @click="down(item,index)">向下合并</button>
                <button class=up @click="edit(index)">编辑</button>
            </view>
            <text class=item-text>{{item}}</text>
            </view>
        </view>
    </view>
    <view class="btns">
        <button hover-class="hover" class="last" @click="lastPage">上一步</button>
        <button hover-class="hover" class="next" @click="nextPage">下一步</button>
    </view>
  </view>
  <uni-popup ref="add" @change="popupChange">
    <view class="content">
      <view class="close">
        <image
          class="close-btn"
          @click="close('add')"
          src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png"
          mode=""
        />
        编辑
      </view>
      <view class="textarea"
        ><fui-textarea
          @confirm='changeInput'
          @click="changeInput"
          @blur="changeInput"
          @focus="changeInput"
          height="170rpx"
          padding="0"
          :borderTop="false"
          :borderBottom="false"
          v-model="textarea"
          placeholder="请输入口播内容"
          placeholder-style="font-size:28rpx"
          maxlength="100"
          isCounter
          counterColor="rgb(144,147,153)"
          counterSize="24"
        ></fui-textarea
      ></view>
      <view class="flxed">
        <button
          @click="addVoice"
          class="tianjia"
          :class="textarea ? 'tianjia-style' : ''"
        >
          修改
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<style lang="scss">
    .page{
        min-height: 1200rpx;
        padding-top: 30rpx;
        box-sizing: border-box;
        padding-bottom: 200rpx;

        .box{
            width: 100%;
            height: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            background-color: #fff;
            .item{
                width: 100%;
                min-height: 150rpx;
                border-bottom: 1px solid rgb(220,223,230);
                margin-bottom: 54rpx;
                .item-top{
                    display: flex;
                    justify-content: flex-end;
                    margin-bottom: 30rpx;
                    .up{
                        padding: 0;
                        padding: 6rpx 18rpx;
                        border-radius: 8rpx;
                        border: 1px solid rgb(192,196,204);
                        text-align: center;
                        line-height: normal;
                        font-size: 24rpx;
                        color: rgb(144,147,153);
                        margin: 0;
                        margin-right: 24rpx;
                        &:nth-last-child(1){
                            margin-right: 0;
                        }
                    }
                }
                .item-text{
                    font-size: 28rpx;
                    color: rgb(69,70,74);
                }
            }
        }
        .btns{
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 166rpx;
            padding-top: 10rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            background-color: #fff;
            .last{
                width: 240rpx;
                height: 88rpx;
                text-align: center;
                line-height: 88rpx;
                border-radius: 8rpx;
                background-color: #fff;
                color: rgb(142,84,244);
                border: 1px solid rgb(142,84,244);
                font-size: 32rpx;
                margin: 0;
            }
            .next{
                width: 420rpx;
                height: 88rpx;
                background-color: rgb(142,84,244);
                border-radius: 8rpx;
                color: #fff;
                font-size: 32rpx;
                text-align: center;
                line-height: 88rpx;
                margin: 0;
                margin-left: 30rpx;
            }
        }
    }
    .content {
  width: 100%;
  height: 1000rpx;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  .close {
    width: 100%;
    height: 108rpx;
    text-align: center;
    line-height: 108rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
    border-bottom: 1px solid rgb(220, 223, 230);
    .close-btn {
      position: absolute;
      top: 30rpx;
      left: 30rpx;
      width: 48rpx;
      height: 48rpx;
    }
    .addbtn {
      position: absolute;
      right: 30rpx;
      font-size: 28rpx;
      color: rgb(142, 84, 244);
    }
  }
  .scroll {
    height: 64rpx;
    margin: 42rpx 30rpx 42rpx 0;
    white-space: nowrap;
    .scroll-item {
      display: inline-block;
      width: 172rpx;
      height: 64rpx;
      text-align: center;
      line-height: 64rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
      background-color: #fff;
      margin-right: 30rpx;
      border-radius: 8rpx;
      &:nth-child(1) {
        margin-left: 30rpx;
      }
    }
  }
  .textarea {
    width: 690rpx;
    height: 260rpx;
    margin-top: 30rpx;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin-left: 30rpx;
    border: 1px solid rgb(220, 223, 230);
  }
  .zi {
    position: absolute;
    bottom: 594rpx;
    right: 60rpx;
    font-size: 24rpx;
    color: rgb(144, 147, 153);
  }
  .flxed {
    width: 100%;
    height: 166rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    .tianjia {
      width: 690rpx;
      height: 88rpx;
      margin: 10rpx 30rpx 0;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16rpx;
      background-color: rgba(241, 241, 241, 1);
      color: rgb(192, 196, 204);
    }
  }
}
.tianjia-style {
  background-color: rgb(142, 84, 244) !important;
  color: #fff !important;
}
.hover{
  opacity: 0.7;
}
</style>

